<template>
  <div class="PerSonal">
    <SelectPick :selectProps="registerPick" />
    <InputBox :inputProps="registerStreetInput" />
    <SelectPick :selectProps="residencePick" />
    <InputBox :inputProps="residenceStreetInput" />
    <InputBox :inputProps="residencePhoneInput" />
    <SelectPick :selectProps="birthProvAndBirthCityAndBirthCountyPick" />
    <SelectPick :selectProps="nativePlacePick" />
    <InputBox :inputProps="workAddressInput" />
  </div>
</template>

<script lang="ts" setup>
import { IgetDetailByNoticeSerialNo } from '@/typings/getDetailByNoticeSerialNo';
import { commonTypes } from '@/typings/commonTypes';
import SelectPick from './SelectPick.vue';
import InputBox from './InputBox.vue';

import { isEmpty } from '@/utils/common';

import { Cell, CellGroup, Dialog, Step, Steps, Form, Field } from 'vant';
import type { FormInstance } from 'vant';

import { useStore } from 'vuex';
const store = useStore();
//因为这里用了script的setup方式就用不到 defineComponent 这个定义组件的api了
import {
  useSlots,
  useAttrs,
  defineProps,
  onMounted,
  watchEffect,
  ref,
  reactive,
  PropType,
  watch,
  computed,
} from 'vue';

const registerPick: commonTypes.IselectProps = reactive({
  /*registerProv	string	户口地址省
    registerCity	string	户口地址市
    registerCounty	string	户口地址县  直接赋值没有code
   做成省市区*/
  name: 'register',
  label: '户口地址',
  type: 'provinceCityDistrict', //省市区
  required: true,
  columns: computed(() => store.getters.getProvCityCountyColumns).value,
  keyOne: 'patAdmiNote',
  keyTwo: 'register',
  ProvCityCountyArray: ['registerProv', 'registerCity', 'registerCounty'], //需要赋值的字段 省市区
});

const registerStreetInput: commonTypes.IselectProps = reactive({
  name: 'registerStreet',
  label: '详细地址',
  required: true,
  readonly: false,
  keyOne: 'patAdmiNote',
  keyTwo: 'registerStreet',
});

const residencePick: commonTypes.IselectProps = reactive({
  /* 虽然是做成省市区，这里直接赋值
  residence	string	现住址
*/
  name: 'residence',
  label: '现住地址',
  type: 'provinceCityDistrict', //省市区
  required: true,
  columns: computed(() => store.getters.getProvCityCountyColumns).value,
  keyOne: 'patAdmiNote',
  keyTwo: 'residence',
});

const residenceStreetInput: commonTypes.IselectProps = reactive({
  name: 'residenceStreet',
  label: '详细住址',
  required: true,
  keyOne: 'patAdmiNote',
  keyTwo: 'residenceStreet',
});

const residencePhoneInput: commonTypes.IselectProps = reactive({
  name: 'residencePhone',
  label: '现住址电话',
  required: true,
  maxlength: 11,
  keyOne: 'patAdmiNote',
  keyTwo: 'residencePhone',
});

const birthProvAndBirthCityAndBirthCountyPick: commonTypes.IselectProps = reactive({
  // 做成省市区，初始化的时候单独处理：拼接省市区
  /*  birthProv	string	出生省份
      birthCity	string	出生城市
      birthCounty	string	出生区/县*/ //赋值同时有code
  name: 'birthProvAndBirthCityAndBirthCounty',
  label: '出生地',
  type: 'provinceCityDistrict', //省市区
  required: true,
  columns: computed(() => store.getters.getProvCityCountyColumns).value,
  keyOne: 'patAdmiNote',
  keyTwo: '',
  handleValue: () => {
    let PatAdmiNote = computed(
      (): IgetDetailByNoticeSerialNo.PatAdmiNote => store.getters.getFormPatAdmiNote,
    ).value;
    if (isEmpty(PatAdmiNote)) {
      return '';
    } else if (isEmpty(PatAdmiNote?.birthProv)) {
      return '';
    }
    return PatAdmiNote.birthProv.name + PatAdmiNote.birthCity.name + PatAdmiNote.birthCounty.name;
  },
  ProvCityCountyArray: ['birthProv', 'birthCity', 'birthCounty'], //需要赋值的字段 省市区
});

const nativePlacePick: commonTypes.IselectProps = reactive({
  name: 'nativePlace',
  label: '籍贯',
  required: true,
  columns: computed(() => store.getters.getDictionaries).value.nativePlace,
  keyOne: 'patAdmiNote',
  keyTwo: 'nativePlace',
});
const workAddressInput: commonTypes.IselectProps = reactive({
  name: 'workAddress',
  label: '工作单位地址',
  required: true,
  keyOne: 'patAdmiNote',
  keyTwo: 'workAddress',
});

//获取父组件传的值
/*const props = defineProps({
  formPam: {
    // type:  Array as () => Array<string>, //(string也可以是其他你自定义的接口)
    type: Object as PropType<IgetDetailByNoticeSerialNo.IRootObject>,
    required: true,
    default: () => {
      return {};
    },
  },
});*/

//初始化赋值
const init = () => {
  const form = computed((): IgetDetailByNoticeSerialNo.BusObj => store.getters.form);
  //console.log('init', admissionNumInput.value);
};

onMounted(() => {
  //
});

// 1.监听对象 赋值
watch(
  () => store.state.form, //props.formPam,
  () => {
    init();
  },
  {
    deep: true, // 深度监听的参数
    immediate: true, //绑定值就开始执行监听
  },
);

//watchEffect 会最先执行
watchEffect(() => {
  //console.log('watchEffect:', 3333);
});
</script>

<style scoped lang="scss">
.PerSonal {
}
</style>
